<template>
    <div style="background-color: rgb(245, 245, 246);">
      <template v-for="(item,index) in targetData"  >
        <div :key="index">
          <el-row :gutter="10">
            <el-col :span="3">
              <div style="padding-left:30px;padding-top: 10px;">添加指标：{{index+1}}</div>
            </el-col>
            <el-col :span="3"
                    style="padding:10px 5px 0 0;">
              <el-button type="text"
                         icon="el-icon-delete"
                         @click.prevent="removeTarget(item)">删除</el-button>
            </el-col>
          </el-row>
          <el-row :gutter="10"
                  style="margin-left: 75px; margin-right: 50px;">
            <el-col :span="8">
              <el-form-item label="指标名称"
                            prop="">
                <el-input size="mini"
                          placeholder="请输入指标名称"
                          v-model="item['targetName']"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="指标编号"
                            prop="">
                <el-input size="mini"
                          placeholder="请输入指标编号"
                          v-model="item['targetCode']"
                          autocomplete="off"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="数据类型"
                            prop="">
                <el-select size="mini"
                           v-model="item['targetNumber']"
                           @change="targetNumberChange(item['targetNumber'],item)"
                           placeholder="请选择数据类型">
                  <el-option v-for="item in dataTypeList"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if='isShowBuer'>
            <el-row :gutter="20"
                    style="padding: 10px 40px 0 40px;">
              <el-col :span="6">
                <el-form-item label="布尔值"
                              prop="">
                  <el-input size="mini"
                            placeholder="请输入true"
                            v-model="item['buer3']"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label=""
                              prop="buer2">
                  <el-input size="mini"
                            placeholder="请输入false"
                            v-model="item['buer4']"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label=""
                              prop="">
                  <el-input size="mini"
                            placeholder="请输入true"
                            v-model="item['buer7']"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label=""
                              prop="">
                  <el-input size="mini"
                            placeholder="请输入false"
                            v-model="item['buer8']"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-if='isShowFloatingPoint'>
            <el-row :gutter="20"
                    style="padding: 10px 40px 0 40px;">
              <el-col :span="8">
                <el-form-item label="浮点最大值"
                              prop="">
                  <el-input size="mini"
                            type="number"
                            placeholder="请输入浮点最大值"
                            v-model="item['floatingPointBig3']"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="浮点最小值"
                              prop="">
                  <el-input size="mini"
                            type="number"
                            placeholder="请输入浮点最小值"
                            v-model="item['floatingPointSmall4']"
                            autocomplete="off"></el-input>
                </el-form-item>
              </el-col>
  
            </el-row>
          </div>
          <div v-if='isShowImg'>
            <el-row :gutter="20"
                    style="padding: 10px 40px 0 40px;">
              <el-col :span="24">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/"
                           list-type="picture-card"
                           :limit="3"
                           :on-exceed="handleExceed"
                           :on-preview="handlePictureCardPreview"
                           :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                  <div slot="tip"
                       class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
                <el-dialog :visible.sync="dialogImgVisible">
                  <img width="100%"
                       :src="item['ImageUrl1']"
                       alt="">
                </el-dialog>
              </el-col>
            </el-row>
          </div>
          <enumDetail v-if='isShowEnum' :data="targetForm.enumList1"></enumDetail>
          
        </div>
      </template>
      <el-row :gutter="10"
              style="margin-left:75px;">
        <el-col :span="3">
          <el-button type="text"
                     icon="el-icon-plus"
                     @click="addTarget">新增指标</el-button>
        </el-col>
      </el-row>
    </div>
  </template>
  <script>
import enumDetail from '@/components/enumDetail/main.vue'
import { v4 as uuid } from 'uuid'
  export default {
    props: {
      data: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        targetData: [],
        isShowBuer: false,
        isShowFloatingPoint: false,
        isShowImg: false,
        dialogImgVisible: false,
        isShowNum: false,
        isShowEnum: false,
        // dialogImgVisible: false,
        defalutTargetObj: {
          enumLabel: '',
          enumValue: '',
        },
        targetForm: {
          targetName: '',
          targetCode: '',
          targetNumber: '',
          buer5: '',
          buer6: '',
          buer7: '',
          buer8: '',
          ImageUrl1: '',
          floatingPointBig3: '',
          floatingPointSmall4: '',
          enumList1: [
            {
              enumLabel: '',
              enumValue: '',
            },
          ],
        },
        dataTypeList: [
          {
            value: '1',
            label: '字符串',
          },
          {
            value: '2',
            label: '枚举',
          },
          {
            value: '3',
            label: '图片',
          },
          {
            value: '4',
            label: '浮点',
          },
          {
            value: '5',
            label: '布尔值',
          },
        ],
      }
    },
    components:{
      enumDetail
  },
    watch: {
      data: {
        handler(val) {
          this.targetData = val
          if (val.length == 0) {
            this.addTarget()
          }
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      targetNumberChange(type, form) {
        switch (type) {
          case '1':
          case '5':
            this.isShowEnum = false
            this.isShowBuer = true
            this.isShowImg = false
            this.isShowFloatingPoint = false
            break
          case '2':
            this.isShowEnum = true
            this.isShowBuer = false
            this.isShowImg = false
            this.isShowFloatingPoint = false
            break
          case '3':
            this.isShowEnum = false
            this.isShowBuer = false
            this.isShowImg = true
            this.isShowFloatingPoint = false
            break
          case '4':
            this.isShowEnum = false
            this.isShowBuer = false
            this.isShowImg = false
            this.isShowFloatingPoint = true
            break
          default:
            break
        }
      },
      removeEnum(item) {
        debugger
        const index = this.targetForm.enumList1.findIndex((x) => x.id == item.id)
        if (index != -1) {
          this.targetForm.enumList1.splice(index, 1)
        }
      },
      addEnum() {
        const enumObj = Object.assign(this.defalutTargetObj, {
         id: uuid(),
        })
        this.targetForm.enumList1.push(JSON.parse(JSON.stringify(enumObj)))
      },
      removeTarget(item) {
        const index = this.targetData.findIndex((x) => x.id == item.id)
        if (index != -1) {
          this.targetData.splice(index, 1)
        }
      },
      addTarget() {
        const targetObj = Object.assign(this.targetForm, {
         id: uuid(),
        })
        this.targetData.push(JSON.parse(JSON.stringify(targetObj)))
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前环境仅限上传 3 个文件`)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePictureCardPreview(file) {
        this.targetForm.ImageUrl1 = file.url
        this.dialogImgVisible = true
      },
    },
  }
  </script>